import React from 'react';
import { Tooltip, Dropdown, Menu } from 'antd';
//@ts-ignore
import { EllipsisOutlined, FileTextOutlined } from '#/utils/antdIcons';
import videoPlayIcon from '@/assets/helper/video_play.png';
import playCircleOutlined from '@/assets/helper/play_circle_outlined.png';
import type { IPublishInfoDataType } from '../../../type';
import { infoOperationList } from '../../../dictionary';
import { PlayModal } from '../index';
import { IFileType, IOperationType } from '../../../type';
import { handelPreview } from '../../../tool';
import styles from './index.less';
import moment from 'moment';

interface IProps {
  /**
   * 数据
   */
  data?: IPublishInfoDataType;
  /**
   * 删除
   */
  onDetele?: (data?: IPublishInfoDataType) => void;
  /**
   * 编辑
   */
  onEdit?: (data?: IPublishInfoDataType) => void;
  currentUser?: any;
}

const FileItem = (props: IProps) => {
  const { onDetele, onEdit, data, currentUser } = props;

  const onOperation = (e?: any) => {
    if (e?.key === IOperationType.DETELE) {
      onDetele && onDetele(data);
    } else {
      onEdit && onEdit(data);
    }
  };

  const onPlay = async () => {
    await PlayModal.show({
      preurl: await handelPreview(data, false),
      showFileType: data?.fileType,
      currentUser,
    });
  };

  // 新增列表
  const menu = (
    <Menu onClick={onOperation}>
      {infoOperationList.map((item) => {
        return <Menu.Item key={item.value}>{item.label}</Menu.Item>;
      })}
    </Menu>
  );

  return (
    <div className={styles.container}>
      <div
        className={props?.data?.fileType === IFileType.VIDEO ? styles.videoCover : styles.pdfCover}
        onClick={onPlay}
      >
        <div className={styles.title}>
          {props?.data?.tabMenuName ||
            props?.data?.secondMenuName ||
            props?.data?.firstMenuName ||
            ''}
        </div>
        {props?.data?.fileType === IFileType.VIDEO && (
          <img className={styles.playIcon} src={playCircleOutlined} />
        )}
      </div>
      <div className={styles.info}>
        <div className={styles.oneLine}>
          <div className={styles.name}>
            {props?.data?.fileType === IFileType.VIDEO ? (
              <img className={styles.nameImg} src={videoPlayIcon} />
            ) : (
              <FileTextOutlined className={styles.nameLogo} />
            )}
            <Tooltip
              overlayClassName="overtoop"
              title={`${props?.data?.firstMenuName ?? ''}
              ${props?.data?.secondMenuName ? ' / ' : ''} ${props?.data?.secondMenuName ?? ''}
              ${props?.data?.tabMenuName ? ' / ' : ''} ${props?.data?.tabMenuName ?? ''}`}
            >
              <div className={styles.nameText}>
                {props?.data?.firstMenuName && (
                  <span className={styles.tabMenuName}>
                    {props?.data?.firstMenuName}
                    {props?.data?.secondMenuName && ' / '}
                  </span>
                )}
                {props?.data?.secondMenuName && (
                  <span className={styles.tabMenuName}>
                    {props?.data?.secondMenuName}
                    {props?.data?.tabMenuName && ' / '}
                  </span>
                )}
                {props?.data?.tabMenuName && (
                  <span className={styles.tabMenuName}>{props?.data?.tabMenuName}</span>
                )}
              </div>
            </Tooltip>
          </div>
          <div className={styles.more}>
            <Dropdown overlay={menu} placement="bottomRight" overlayClassName={styles.dropdownA}>
              <EllipsisOutlined />
            </Dropdown>
          </div>
        </div>
        <div className={styles.twoLine}>
          <div className={styles.log}>
            <div className={styles.operator}>{props?.data?.modifyName ?? ''}</div>
            <div className={styles.uploadTime}>
              上传于
              {props?.data?.createTime
                ? moment(props?.data?.modifyTime).format('YYYY.MM.DD HH:mm:ss')
                : ''}
            </div>
          </div>
          <div className={styles.size}>{`${props?.data?.fileSize ?? ''}${
            props?.data?.fileSize ? 'MB' : ''
          }`}</div>
        </div>
      </div>
    </div>
  );
};

export default FileItem;
